<template>
  <div class="commom_page_bg">
    <div class="l_wrap">
      <div id="liquidFill"
           ref="liquidFill">
      </div>
      <div class="pop"></div>
    </div>

  </div>
</template>

<script>
import Echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  components: {},
  props: {},
  data () {
    return {
      option: {
        series: [
          {
            type: 'liquidFill',
            amplitude: 8,
            // color: {
            //   type: 'linear',
            //   x: 0,
            //   y: 0,
            //   x2: 0,
            //   y2: 1,
            //   colorStops: [
            //     {
            //       offset: 0, color: '#2b4bdc'
            //     },
            //     {
            //       offset: 0.9, color: '#162981'
            //     },
            //     {
            //       offset: 1, color: '#192e90'
            //     }
            //   ],
            //   globalCoord: false
            // },
            color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
            selectedMode: false,
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#5470f3',
                shadowBlur: 1,
                shadowColor: 'rgba(0,148,216,0.8)'
              }
            },
            fontSize: 12,
            fontWeight: 'lighter',
            backgroundStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: '#0d0a38' // 0% 处的颜色
                }, {
                  offset: 0.7, color: '#11195a'
                }, {
                  offset: 1, color: '#1a35a9' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            label: {
              formatter: '',
              fontSize: 12,
              fontWeight: 'lighter',
              color: ''
            },
            data: [
              {
                value: 0.3
              },
              {
                value: 0.5
                // itemStyle: {
                //   color: 'red'
                // }
              }
            ],
            radius: '98%'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setEcharts()
  },
  methods: {
    setEcharts () {
      const dom = this.$refs.liquidFill
      Echarts.dispose(dom)
      this.myEcharts = Echarts.init(dom)
      this.myEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.l_wrap {
  position: relative;
  margin: 160px auto;
  width: 200px;
  height: 200px;
}
#liquidFill {
  //
  width: 200px;
  height: 200px;
}
.pop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 200px;
  height: 200px;
  background: url("../../assets/img/paopao.png") left top no-repeat,
    url("../../assets/img/paopao.png") right top no-repeat;
  border-radius: 100%;
  /*transition: all 1s linear;*/
  animation: pao 22s linear infinite;
}
@keyframes pao {
  from {
  }
  to {
    background-position: left bottom, right bottom;
  }
}
</style>
